
<div class="outbox">
    {{template "header" .}}
    <div class="table-container is-centered" style="margin:0 auto">
        <table class="table" >
            <tbody>
              <tr>
                  <td id="ns" v="{{.Data.DepDetail.NameSpace}}">命名空间：{{.Data.DepDetail.NameSpace}}</td>
                  <td id="deployment" v="{{.Data.DepDetail.Name}}">名称:{{.Data.DepDetail.Name}}</td>
                  <td>镜像：{{.Data.DepDetail.Images}}</td>
                  <td>创建时间:{{.Data.DepDetail.CreateTime}}</td>
              </tr>
            <tr>
                <td colspan="4">副本:可用:
                    {{index .Data.DepDetail.Replicas 1}}/不可用:{{index .Data.DepDetail.Replicas 2}}
                    <button id="incr" class="button is-info is-small is-btn is-bold">+</button>
                    <button id="dec" class="button is-info is-small is-btn is-bold">-</button>
                </td>
            </tr>
            <script>
                function getObject(dec){
                    return {
                        "ns":$("#ns").attr("v"),
                        "deployment":$("#deployment").attr("v"),
                        "dec":dec
                    }
                }
                function incr(dec){
                    $.ajax({
                        type: "POST",
                        url: "/update/deployment/scale",
                        data: JSON.stringify(getObject(dec)),
                        dataType: "json",
                        success: function(data){
                            if(data.message==="Ok"){
                               // alert("操作成功")

                            }
                        },
                        error:function (data) {
                            alert(data.responseJSON.error)
                        }
                    })
                }
                $("#incr").click(function () {
                    incr(false)
                })
                $("#dec").click(function () {
                    incr(true)
                })

            </script>
            </tbody>
        </table>
        <nav class="panel"  >
            <p class="panel-heading">
                Pods信息
            </p>
            <div class="table-container">
                <p class="is-left text-left">
                    <button id="cmdDelPod" class="button">删除POD</button>
                </p>
                <script>
                    $("#cmdDelPod").click(function(){
                        $(".pods").each(function () {
                            if($(this).prop("checked")){
                                url="/core/pods?namespace=" + $(this).attr("ns") + "&pod=" + $(this).attr("pod")
                                $.ajax({
                                    type: "DELETE",
                                    url: "/core/pods?namespace=" + $(this).attr("ns") + "&pod=" + $(this).attr("pod"),
                                    dataType: "json",
                                })
                            }


                        })
                    })
                </script>
             <table class="table"  >
                <thead>
                <th width="5%"></th>
                <th width="5%">阶段</th>
                <th width="5%">状态</th>
                <th width="40%">名称</th>
                <th>镜像</th>
                <th>主机</th>
                <th>创建时间</th>
                <th></th>
                </thead>
                <tbody id="podlist">
                    <tr>
                        <td><input class="pods"  ns="${Namespace}"  pod="${Name}" type="checkbox"/></td>
                        <td>${Phase}</td>
                        <td class="status">${Status}</td>
                        <td>${Name}
                           <p class="is-red">${Message}</p>
                        </td>
                        <td>${Images}
                            <p class="is-gray">${IP[0]}</p>
                        </td>
                        <td>${NodeName}
                            <p class="is-gray">${IP[1]}</p>
                        </td>
                        <td>${CreateTime} </td>
                        <td>
                            <a target="_blank" href="/core/pods_json?ns=${Namespace}&pod=${Name}">查看JSON</a>
                        </td>
                    </tr>

                </tbody>
            </table>
            </div>
        </nav>
            <script>
                let orgData=""
                let tmpl=$("#podlist").html()
                $("#podlist").html("");
                $.template( "pods", tmpl );
                const ns=$("#ns").attr("v")
                const dep=$("#deployment").attr("v")
                function loadPods() {
                    $.ajax({
                        type: "POST",
                        url: "/core/pods?namespace="+ns+"&deployment="+dep,
                        dataType: "json",
                        success: function (data) {
                            if (data.message === "Ok") {
                                let tmpMd5=md5(JSON.stringify(data.result))
                                if(tmpMd5!==orgData){
                                    $("#podlist").html("");
                                    let pods=data.result ;// pods列表
                                    pods.forEach((pod)=>{
                                        if(pod.IsReady && pod.Phase==="Running"){
                                            pod.Status="Active"
                                            pod.Message=""
                                        }
                                        else
                                            pod.Status="Waiting"
                                    })
                                    $.tmpl("pods", pods )
                                        .appendTo( "#podlist" );
                                    orgData=tmpMd5
                                    $(".status").each(function(){
                                        if($(this).html()==="Active")
                                            $(this).attr("class","active")
                                        else
                                            $(this).attr("class","unactive")
                                    })
                                }
                            }
                        },
                        error: function (data) {
                            alert(data.responseJSON.error)
                        }
                    })
                }
                loadPods()
                window.setInterval("loadPods()",800)
            </script>
    </div>

</div>

{{template "footer" .}}